import React from 'react'
import { ProConfigProvider } from '@ant-design/pro-components'
import { ConfigProvider, theme } from 'antd'
import zhCN from 'antd/locale/zh_CN';
import enUs from 'antd/locale/en_US';
import useLanguageStore from '@/store/modules/language';
export { asyncModalWarpper } from './AsyncModalWarp';

const { compactAlgorithm } = theme;

interface Props {
  children: React.ReactNode;
}

const antdThemeData = {
  cssVar: true, 
  hashed: false,
  token: {
    "colorPrimary": "#409EFF",
    "colorInfo": "#00784F",
    // "colorBgBase":"#00784F",
    // "colorInfoBg": "#fff",
    // "colorText": "#fff",
    // "colorBgContainer": "#00784F",
    // "colorBgElevated":"#00784F",
    // "colorBorder":"#00784F",
    cardPaddingBase: 12,
    cardPaddingBaseSm: 12,
    "sizeStep": 4,
    "sizeUnit": 4,
    "borderRadius": 4,
    "wireframe": false,
    "marginXS":5,
    "lineHeightSM":2.16,
  },
  components:{
    
    Breadcrumb: {
      /* 这里是你的组件 token */
      "separatorMargin":10,
      // "itemColor":"#97a8be",
      // "linkColor":"#97a8be",
      // "linkHoverColor":"#fff",
      // "lastItemColor":"#97a8be",
      // "separatorColor":"#97a8be",
    },
    Menu: {
      /* 这里是你的组件 token */
      // "itemSelectedColor":"#b9c0d0",

    },
    Layout: {
      /* 这里是你的组件 token */
      // "bgLayout":"#00784F",

    },
    Tabs: {
      /* 这里是你的组件 token */
      "cardPadding":"0px 8px",
      "titleFontSize":12,
      "cardHeight":26,
      "erticalItemPadding":"0px 8px",
    },
  },
  
  algorithm: [compactAlgorithm]
}

const BasicWarp:React.FC<Props> = (props) => {
  const languageStore = useLanguageStore();
  const lan = languageStore.language === 'en' ? enUs : zhCN
  return (
    <ConfigProvider
      locale={lan}
      theme={antdThemeData}
      getTargetContainer={() => document.body}>
      <ProConfigProvider hashed={true}>
        {props.children}
      </ProConfigProvider >
    </ConfigProvider>
  )
}

export default BasicWarp